<template>
  <div class="supplement">
    <navBar title="订单资料审核" @onClickLeft="onClickLeft" />
    <van-collapse v-model="action.activeClass">
      <van-collapse-item title="订单信息" name="1">
        <div class="order-info">
          <van-field
            readonly
            label="报销地点"
            :value="show.order.company_title"
          />
          <van-field
            readonly
            label="待办事项"
            :value="show.order.service_project_title"
          />
          <van-field
            readonly
            label="报销类型"
            :value="show.order.expenseCate_title"
          />
          <van-field
            readonly
            label="报销时间"
            :value="
              show.order.service_time == 0
                ? 'NA'
                : show.order.service_time + '天'
            "
          />
          <van-field
            readonly
            label="发票是否过期"
            :value="show.order.isTimeOver == -1 ? '否' : '是'"
          />
        </div>
      </van-collapse-item>
      <van-collapse-item title="订单资料" name="2">
        <div class="order-data">
          <div
            class="order-data-item"
            v-for="(item, index) in show.oldJson"
            :key="index"
          >
            <van-cell required>
              <template #title>
                <span class="custom-title">{{ item.fieldCh }}</span>
                <van-tag
                  type="danger"
                  v-if="
                    item._child &&
                      item.isSure == '-1' &&
                      item.needExamineDataNotPass
                  "
                  @click="reasonListShows(item.needExamineDataNotPass)"
                  class="reason-bottom"
                  style="margin-left: 10px"
                  >{{
                    "退回原因(" + item.needExamineDataNotPass.length + ")"
                  }}</van-tag
                >
              </template>
              <template #default>
                <van-tag :type="item.colour" @click="showChoose(index)">{{
                  item.title
                }}</van-tag>
              </template>
            </van-cell>
            <div class="img-choose-warp" v-if="item._child">
              <div
                class="img-choose flex-column"
                v-for="(value, key) in item._child"
                :key="key"
              >
              <div v-if="value.value.substring(value.value.length-3,value.value.length)=='pdf'" class="pdfstyle">
                
                   <a
                class='block'
                target="_blank"
                :href="value.value"
                >
                <img src='@/assets/img/pdf.png' />
              </a>
              </div>
               <div v-else>
                   <van-image
                  fit="cover"
                  width="80"
                  height="80"
                  :src="value.value"
                  @click="getBigImg(value.value)"
                />
               </div>
                <van-radio-group
                  v-model="value.isSure"
                  @change="radioChange(index, key)"
                >
                  <van-radio name="1" class="mt5">通过</van-radio>
                  <van-radio name="-1">不通过</van-radio>
                </van-radio-group>
                <van-tag
                  type="danger"
                  v-if="value.needExamineDataNotPass && value.isSure == '-1'"
                  @click="reasonListShows(value.needExamineDataNotPass)"
                  class="reason-bottom"
                  >{{
                    "退回原因(" + value.needExamineDataNotPass.length + ")"
                  }}</van-tag
                >
              </div>
            </div>
            <div class="img-choose-warp" v-if="item.value">
              <div class="img-choose flex-column">
                  <div  v-if="item.value.substring(item.value.length-3,item.value.length)=='pdf'" class="pdfstyle">
                    <a
                    class="block"
                    target="_blank"
                    :href="item.value"
                    >
                    <img src='@/assets/img/pdf.png' />
                    </a>
                </div>
                  <div v-else>
                      <van-image
                        fit="cover"
                        width="80"
                        height="80"
                        :src="item.value"
                        @click="getBigImg(item.value)"
                        />
                  </div>
                
                <van-radio-group
                  v-model="item.isSure"
                  @change="radioChange(index)"
                >
                  <van-radio name="1" class="mt5">通过</van-radio>
                  <van-radio name="-1">不通过</van-radio>
                </van-radio-group>
                <van-tag
                  type="danger"
                  v-if="item.needExamineDataNotPass && item.isSure == '-1'"
                  @click="reasonListShows(item.needExamineDataNotPass)"
                  class="reason-bottom"
                  >{{
                    "退回原因(" + item.needExamineDataNotPass.length + ")"
                  }}</van-tag
                >
              </div>
            </div>
          </div>
        </div>
      </van-collapse-item>
      <div class="supplement-button">
        <van-button
          round
          block
          type="danger"
          @click="action.isShowRemark = true"
          style="margin-bottom: 10px"
          >退回订单</van-button
        >
        <van-button
          round
          block
          type="info"
          native-type="submit"
          @click="onSubmit"
          >提交</van-button
        >
      </div>
    </van-collapse>
    <!-- 退回订单弹出框 -->
    <van-dialog
      v-model="action.isShowRemark"
      title="退回原因"
      show-cancel-button
      @confirm="onReturnOrder"
      @close='closeReturnOrder'
      close-on-click-overlay
    >
      <van-cell-group>
        <van-field v-model="post.remark" placeholder="请输入退回原因" />
      </van-cell-group>
    </van-dialog>

    <!-- 是否通过弹出层-->
    <van-popup
      v-model="action.isShowPopup"
      position="bottom"
      :style="{ height: '35%' }"
    >
      <van-picker
        show-toolbar
        default-index="0"
        :columns="show.columns"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
    <!-- 不通过原因 弹出框 -->
    <van-dialog
      v-model="show.dialogs"
      :title="show.reasonData.fieldCh"
      show-cancel-button
      @cancel="reasonCancel"
      :showConfirmButton="!show.reasonCheck"
      :showCancelButton="!show.reasonCheck"
      :before-close="onBeforeClose"
    >
      <div class="dialog column">
        <div class="dialog-title">
          {{
            show.selectColumn
              ? show.reasonData.fieldCh
              : show.reasonData.fieldCh + " 图片" + show.reasonData.picNo
          }}
        </div>
        <!-- 图片展示及按钮 -->
        <div class="dialog-img">
            <div  v-if="show.dialogs&&show.reasonData.value.substring(show.reasonData.value.length-3,show.reasonData.value.length)=='pdf'" class="pdfstyle">
                <a
                    class="block"
                    target="_blank"
                    :href="show.reasonData.value"
                    >
                    <img src='@/assets/img/pdf.png' />
                    </a>
            </div>
            <div v-else>
                <img
                :src="show.reasonData.value"
                @click="getBigImg(show.reasonData.value)"
                v-if="!show.selectColumn"
                />
            </div>
        </div>
        <!-- 选择框 -->
        <el-select
          v-model="show.reasonClickList"
          :value="show.reasonClickList"
          multiple
          placeholder="请选择"
          :multiple-limit="8"
          popper-class="select"
          @change="handleChange"
          value-key="id"
          ref="mySelect"
          @blur="selectBlur"
          @focus="selectFocus"
        >
          <el-option
            v-for="item in show.reasonList"
            :key="item.id"
            :label="item.title"
            :value="item"
          />
        </el-select>
        <!-- 如果文本 文字统计 -->
        <van-field
          style="border: 1px solid #f2f2f2; margin-top: 10px"
          v-model="show.message"
          v-show="show.reasonData.isCheck"
          ref="textareas"
          rows="2"
          autosize
          type="textarea"
          maxlength="20"
          placeholder="请输入原因"
          show-word-limit
        >
          <template #button>
            <van-tag type="danger" @click="reasonMsg">完成</van-tag>
          </template>
        </van-field>
      </div>
    </van-dialog>
    <!-- 弹出层 -->
    <van-dialog v-model="show.isReasonListShow" title="不通过原因">
      <div class="column" style="padding-top: 10px">
        <span
          v-for="(item, index) in show.reasonListDialog"
          :key="index"
          style="padding: 5px 16px; font-weight: 200; font-size: 14px"
          >{{ index + 1 + ". " + item.title }}</span
        >
      </div>
    </van-dialog>
  </div>
</template>

<script>
import navBar from "@cb/navBar.vue";
import { orderSupplement, uploadFile, deleteFile } from "@a/order.js";
import axios from "axios";
import { get } from "../../../../public/API/query";
import { Dialog, Toast, Divider, ImagePreview } from "vant";
import { select } from "element-ui";
export default {
  components: {
    navBar
  },
  data() {
    return {
      baseUrls: process.env.VUE_APP_BASE_URL,
      // 从接口请求的数据
      online: {
        needJson: [],
        sortOutJson: []
      },
      // 用于展示的数据
      show: {
        order: {},
        oldJson: [
          {
            fieldEn: "",
            value: "",
            isSure: ""
          },
          {
            fieldEn: "",
            isSure: "",
            _child: [
              { value: "", isSure: true },
              { value: "", isSure: true }
            ]
          }
        ],
        isReasonListShow: false,
        columns: ["通过", "不通过"],
        dialogs: false, //是否显示弹出框
        message: "", //填写原因内容
        reasonList: [
          {
            //select列表
            title: "",
            id: ""
          }
        ],
        reasonClickList: [], //多选后的数据
        reasonData: {
          //不通过原因 图片详细信息
          title: "", //标题
          picNo: "", //图片序号，picNo
          reason: [], //原因
          fieldEn: "", //英文名字
          isCheck: false, //switch开关
          indexs: ["parentIndex", "childIndex"] //不通过原因的索引[主，子]
        },
        selectColumn: false,
        isReasonList: false, //是否展示已选择原因列表
        reasonListDialog: [] //当前不通过原因列表
      },
      // 用户操作选择的数据
      action: {
        activeClass: ["1", "2"],
        isShowPopup: false,
        //记住点击的弹出层
        clickIndex: "",
        isShowRemark: false
      },
      // 当前页面表单提交数据
      post: {
        id: "",
        type: 1,
        sendJson: [],
        remark: ""
      }
    };
  },
  deactivated() {
    this.$destroy(true); //销毁组件
  },
  watch: {},
  created() {
    this.post.id = this.$route.query && this.$route.query.id;
    this.getOrder();
  },
  methods: {
    closeReturnOrder(){
      this.post.remark = '';
    },
    onReturnOrder() {
      if (this.post.remark.trim().length == 0) {
        Toast.fail("请输入退单原因");
      } else {
        let params = {
          id: this.post.id,
          remark: this.post.remark
        };
        get("applyChargeback", params, res => {
          console.log(res);
          if (res.code == 200) {
            Toast.success("退回成功");
            this.post.remark = '';
            this.$router.push("/replace/home");
          }
        });
      }
    },

    getOrder() {
      let params = {
        id: this.post.id
      };
      get("ordersSortOutExaminePage", params, res => {
          console.log('数据',res)
        this.show.order = res.data.order;
        this.online.needJson = res.data.ordersSortOut.needJson;
        let oldJson = [];
        //如果是第二次审核，重新处理oldJson
        if (Array.isArray(res.data.ordersSortOut.sortOutJson)) {
            oldJson = []
          let needJson = res.data.ordersSortOut.needJson;
          let sortOutJson = res.data.ordersSortOut.sortOutJson;
          res.data.ordersSortOut.oldJson.map((v,index)=>{
            console.log(typeof v.value)
            for(let i=0;i<res.data.ordersSortOut.needJson.length;i++){
              if(res.data.ordersSortOut.needJson[i].fieldEn==v.fieldEn){
                if(res.data.ordersSortOut.needJson[i].isSure==1){
                    if (Array.isArray(v["value"])) {
                        let _child = [];
                        v["value"].map(val => {
                        _child.push({ value: val, isSure: '1' });
                        });
                        oldJson.push({
                        fieldEn: v.fieldEn,
                        fieldCh: v.fieldCh,
                        isSure: 1,
                        title: "通过",
                        colour: "success",
                        isCanChoose: false,
                        _child: _child
                        });
                    } else {
                        oldJson.push({
                        fieldEn: v.fieldEn,
                        fieldCh: v.fieldCh,
                        isSure: '1',
                        value: v.value,
                        isCanChoose: false,
                        title: "通过",
                        colour: "success"
                        });
                    }
                }else{
                     if (Array.isArray(v["value"])) {
                        let _child = [];
                        v["value"].map(val => {
                            _child.push({ value: val, isSure: '1' });
                        });
                        sortOutJson.map(item=>{
                            if(v.fieldEn == item.fieldEn){
                                item.value.map(item1=>{
                                   _child.map(item2=>{
                                      if(item1 == item2.value){item2.isSure = 0} 
                                   })
                                })
                            }
                        })
                        oldJson.push({
                            fieldEn:v.fieldEn,
                            fieldCh:v.fieldCh,
                            isSure:0,
                            title:'请选择',
                            colour:'primary',
                            isCanChoose:false,
                            _child:_child
                        })
                    } else {
                        oldJson.push({
                        fieldEn: v.fieldEn,
                        fieldCh: v.fieldCh,
                        isSure: 0,
                        value: v.value,
                        isCanChoose: false,
                        title: "请选择",
                        colour: "primary"
                        });
                    }
                }
              }
            }
          })
        }else{
            oldJson = []
           res.data.ordersSortOut.oldJson.map(v => {
            if (Array.isArray(v["value"])) {
                let _child = [];
                v["value"].map(val => {
                _child.push({ value: val, isSure: 0 });
                });
                oldJson.push({
                fieldEn: v.fieldEn,
                fieldCh: v.fieldCh,
                isSure: 0,
                title: "请选择",
                colour: "primary",
                isCanChoose: false,
                _child: _child
                });
            } else {
                oldJson.push({
                fieldEn: v.fieldEn,
                fieldCh: v.fieldCh,
                isSure: 0,
                value: v.value,
                isCanChoose: false,
                title: "请选择",
                colour: "primary"
                });
            }
            }); 
        }
        this.show.oldJson = oldJson;
        this.online.sortOutJson = res.data.ordersSortOut.sortOutJson;
      });

      function getNewOldJson(oldJson, needJson, sortOutJson) {
        let newOldJson = [];
        needJson.map(v => {
          for (let i = 0; i < oldJson.length; i++) {
            if (oldJson[i].fieldEn == v.fieldEn) {
              if (v.isSure == -1) {
                newOldJson.push(oldJson[i]);
              }
            }
          }
        });
        sortOutJson.map(v => {
          let sign = 0;
          for (let i = 0; i < newOldJson.length; i++) {
            if (newOldJson[i].fieldEn == v.fieldEn) {
              sign = 1;
              if (Array.isArray(v["value"])) {
                if (!Array.isArray(v["value"])) {
                  Toast.fail("程序错误:" + v["fieldEn"] + "必须是数组");
                }
                let _child = [];
                v["value"].map(val => {
                  _child.push({ isSure: 0, value: val });
                });
                newOldJson[i]["_child"] = _child;
              } else {
                if (Array.isArray(v["value"])) {
                  Toast.fail("程序错误:" + v["fieldEn"] + "必须不能是数组");
                }
                newOldJson[i]["value"] = v.value;
              }
            }
          }
          if (sign == 0) {
            Toast.fail("程序错误:" + v["fieldEn"] + "的数据不存在于newOldJson");
            return;
          }
        });
        return newOldJson;
      }
    },

    onClickLeft() {
      this.$router.go(-1);
    },
    // 提交
    onSubmit() {
      let isOK = true;
      for (var i = 0; i < this.show.oldJson.length; i++) {
        if (this.show.oldJson[i]._child) {
          for (var h = 0; h < this.show.oldJson[i]._child.length; h++) {
            if (this.show.oldJson[i]._child[h].isSure == 0) {
              Toast.fail("请选择" + this.show.oldJson[i].fieldCh);
              return;
            }
          }
        } else {
          if (this.show.oldJson[i].isSure == 0) {
            Toast.fail("请选择" + this.show.oldJson[i].fieldCh);
            return;
          }
        }
      }
      let sendJson = [];
      let type = 1;
      this.show.oldJson.map(v => {
        if (v.isSure == -1) {
          type = -1;
        }
        if (v._child) {
          let _child = [];
          v._child.map(val => {
            val.needExamineDataNotPass == undefined ||
            val.needExamineDataNotPass == null
              ? _child.push({ value: val.value, isSure: val.isSure })
              : _child.push({
                  value: val.value,
                  isSure: val.isSure,
                  needExamineDataNotPass: val.needExamineDataNotPass
                });
          });
          v.needExamineDataNotPass == undefined ||
          v.needExamineDataNotPass == null
            ? sendJson.push({
                fieldEn: v.fieldEn,
                isSure: v.isSure,
                _child: _child
              })
            : sendJson.push({
                fieldEn: v.fieldEn,
                isSure: v.isSure,
                needExamineDataNotPass: v.needExamineDataNotPass,
                _child: _child
              });
        } else {
          v.needExamineDataNotPass == undefined
            ? sendJson.push({ fieldEn: v.fieldEn, isSure: v.isSure })
            : sendJson.push({
                fieldEn: v.fieldEn,
                isSure: v.isSure,
                needExamineDataNotPass: v.needExamineDataNotPass
              });
        }
      });
      let params = {
        id: this.post.id,
        type: type,
        sendJson: JSON.stringify(sendJson)
      };
      get("ordersSortOutExamineSub", params, res => {
        if (res.code == 200) {
          Toast.success("提交成功");
          this.$router.push("/replace/home");
        }
      });
    },
    //右侧请选择
    showChoose(index) {
      this.show.reasonData.indexs = [index, null];
      //记住当前选中
      this.show.oldJson.map((v, k) => {
        if (k == index) {
          if (v.isCanChoose) {
            this.action.isShowPopup = true;
          } else {
            if (v._child != undefined) {
              Toast.fail("选项全部选择后 才可以点击该按钮");
              return false;
            } else {
              Toast.fail("单图不可点击该按钮");
              return false;
            }
          }
        }
      });
      this.action.clickIndex = index;
    },
    // 关闭弹出层
    // 弹出层内容选中
    onConfirm(val) {
      let color = "";
      val == "通过" ? (color = "success") : (color = "danger");
      if (val == "不通过") {
        this.show.dialogs = true;
        this.show.reasonClickList = this.show.oldJson[
          this.action.clickIndex
        ].needExamineDataNotPass;
      }
      this.getReasonList();
      this.show.oldJson[this.action.clickIndex]["title"] = val;
      this.show.oldJson[this.action.clickIndex]["isSure"] =
        val == "通过" ? 1 : -1;
      this.show.oldJson[this.action.clickIndex]["colour"] = color;
      this.show.selectColumn = true;
      this.action.isShowPopup = false;
    },
    // 选择是否通过
    radioChange(name, key = null) {
      this.show.reasonData.indexs = [name, key];
      if (key != null) {
        /*
        1.全部没选择时：请选择
        2.只要有一个不通过时：不通过
        3.只有全部是通过时，通过
        */
        let isSure = null;
        let type = [1, -1, -1, 1]; //0是否全部没选择，1是否有不通过，2是否全部通过,3是否全部选择
        this.show.oldJson[name]._child.map((v, k) => {
          if (v.isSure == -1 || v.isSure == "-1") {
            type[1] = 1; //是否有不通过，是
            type[2] = -1; //是否全部通过，否
            isSure = -1;
          }
          if (v.isSure == 0 || v.isSure == "0") {
            type[3] = -1; //是否全部选择，否
          } else {
            type[0] = -1; //是否全部没选择，否
          }
          if (v.isSure == 1 || v.isSure == "1") {
            type[2] = 1; //是否全部通过，是
          }
        });
        if (type[1] == 1) {
          type[2] = -1;
        }
        if (type[0] == 1) {
          //是否全部没选择，是
          type[3] = -1;
        }
        if (type[3] == 1) {
          this.show.oldJson[name]["isCanChoose"] = true;
        }
        if (isSure == null) {
          if (type[2] == 1) {
            isSure = 1;
          } else {
            isSure = 0;
          }
        }
        this.show.oldJson[name]["title"] = this.getTitle(isSure);
        this.show.oldJson[name]["colour"] = this.getColour(isSure);
        this.show.oldJson[name]["isSure"] = isSure;
        // 多图情况下
        this.show.oldJson[name]._child[key]["isSure"] == -1
          ? (this.show.dialogs = true)
          : (this.show.dialogs = false);
        this.show.reasonClickList = this.show.oldJson[name]._child[
          key
        ].needExamineDataNotPass;
        this.show.reasonData.picNo = Number(key) + 1;
        this.show.reasonData.value = this.show.oldJson[name]._child[key].value;
      } else {
        // 这里是单图的情况下
        this.show.oldJson[name]["isSure"] == "-1"
          ? (this.show.dialogs = true)
          : (this.show.dialogs = false);
        this.show.oldJson[name]["title"] = this.getTitle(
          this.show.oldJson[name]["isSure"]
        );
        if (this.show.oldJson[name].needExamineDataNotPass) {
          this.show.reasonClickList = this.show.oldJson[
            name
          ].needExamineDataNotPass;
        }
        this.show.oldJson[name]["colour"] = this.getColour(
          this.show.oldJson[name]["isSure"]
        );
        this.show.reasonData.value = this.show.oldJson[name].value;
        this.show.reasonData.picNo = "";
      }
      this.show.reasonData.isCheck = false;
      this.show.message = "";
      this.show.reasonData.fieldCh = this.show.oldJson[name].fieldCh;
      this.show.reasonData.fieldEn = this.show.oldJson[name].fieldEn;
      if (this.show.dialogs) {
        this.getReasonList();
      }
      this.$forceUpdate();
    },
    getTitle(isSure) {
      switch (isSure) {
        case -1:
          return "不通过";
        case 0:
          return "请选择";
        case 1:
          return "通过";
        case "-1":
          return "不通过";
        case "0":
          return "请选择";
        case "1":
          return "通过";
      }
    },
    getColour(isSure) {
      switch (isSure) {
        case -1:
          return "danger";
        case 0:
          return "primary";
        case 1:
          return "success";
        case "-1":
          return "danger";
        case "0":
          return "primary";
        case "1":
          return "success";
      }
    },
    // 通过不通过理由来·改变状态
    isShowcondition() {
      let val = "1";
      let parent = this.show.reasonData.indexs[0];
      let child = this.show.reasonData.indexs[1];
      if (this.show.reasonData.indexs[1] == null) {
        this.show.oldJson[parent]["title"] = this.getTitle(val);
        this.show.oldJson[parent]["colour"] = this.getColour(val);
        this.show.oldJson[parent]["isSure"] = val;
      } else {
        this.show.oldJson[parent]._child[child]["title"] = this.getTitle(val);
        this.show.oldJson[parent]._child[child]["title"] = this.getColour(val);
        this.show.oldJson[parent]._child[child]["isSure"] = val;
      }
    },
    // 大图预览
    getBigImg(url) {
      ImagePreview({
        images: [url],
        closeable: true
      });
    },
    onCancel() {
      this.action.isShowPopup = false;
    },
    onBeforeClose(action, done) {
      if (action == "confirm") {
        console.log(this.show.reasonClickList);
        if (
          this.show.reasonClickList == undefined ||
          this.show.reasonClickList.length == 0
        ) {
          Toast.fail("不通过理由不能为空");
          done(false);
        } else {
          // 这里是单图
          let parent = this.show.reasonData.indexs[0];
          let child = this.show.reasonData.indexs[1];
          if (child == null) {
            this.show.reasonClickList == undefined
              ? console.log(1)
              : (this.show.oldJson[
                  parent
                ].needExamineDataNotPass = this.show.reasonClickList);
          } else {
            //这里是多图
            this.show.reasonClickList == undefined
              ? ""
              : (this.show.oldJson[parent]._child[
                  child
                ].needExamineDataNotPass = this.show.reasonClickList);
          }
          this.show.reasonList = [];
          this.show.selectColumn = false;
          done();
        }
      } else {
        done();
      }
    },
    // 点击取消
    reasonCancel() {
      this.show.dialogs = false;
      Dialog.confirm({
        title: "标题",
        message: "你确定取消该操作吗？确认之后该图片会改为通过"
      })
        .then(() => {
          this.show.dialogs = false;
          this.isShowcondition();
          this.show.reasonClickList = [];
          this.show.reasonList = [];
          this.show.selectColumn = false;
        })
        .catch(() => {
          this.show.dialogs = true;
        });
    },
    // 填写理由
    reasonMsg() {
      var len = this.show.reasonList.filter(
        item => item.title == this.show.message
      );
      if (len.length > 0) {
        Toast.fail("已有相同原因");
      } else {
        let params = {
          fieldEn: this.show.reasonData.fieldEn,
          title: this.show.message
        };
        if (this.show.message == "") {
          Toast.fail("原因不能为空");
        } else {
          this.show.reasonData.indexs[1] == null
            ? (params.type = 1)
            : (params.type = 2);
          get("addNotPass", params, res => {
            if (res.code == 200) {
              Toast.success("添加成功");
              this.show.reasonData.isCheck = false;
              this.show.message = "";
              this.getReasonList();
            } else {
              Toast.fail("退回原因最多只能有8个");
            }
          });
        }
      }
    },
    // 获取不通过原因列表
    getReasonList() {
      let params = {
        fieldEn: this.show.reasonData["fieldEn"],
        type: this.show.reasonData.indexs[1] == null ? 1 : 2
      };
      get("getFieldEnNotPass", params, res => {
        if (res.code == 200) {
          this.show.reasonList = res.data;
          this.show.reasonList.push({ title: "其他原因", id: "NA" });
        } else {
          Toast.fail("无原因可选,请先填写");
          this.show.reasonData.isCheck = true;
        }
      });
    },
    handleChange(val) {
      console.log(this.$refs.mySelect);
      let other = val.filter(item => item.id == "NA");
      if (other.length > 0) {
        this.show.reasonData.isCheck = true;
        this.$refs.mySelect.handleClose();
      } else {
        this.show.reasonData.isCheck = false;
      }
      this.show.reasonClickList = val.filter(item => item.id != "NA");
    },
    // seletct获得焦点1
    selectFocus() {
      this.show.reasonData.isCheck = false;
    },
    // 失去焦点
    selectBlur(){
        if(this.show.reasonClickList == undefined){
            this.show.reasonData.isCheck = true
        }
    },
    reasonListShows(val) {
      this.show.isReasonListShow = true;
      this.show.reasonListDialog = val;
    }
  },
  mounted() { //页面加载完毕事件
	 	window.scroll(0, 0); 
	}
};
</script>

<style lang="less" scoped>
/deep/ .van-cell {
  align-items: center;
}
.block{
  img{
    width: 60px;
    height: 60px;
    margin: 10px;
  }
    display: block;
    width: 80px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    color: #6E6E6E;
}
.pdfstyle{
    width: 110px;
    height: 85.6px;
}
.supplement {
  .order-info {
  }
  .order-data {
    .order-data-item {
      margin-bottom: 20px;
      .van-image {
        margin-right: 30px;
        box-shadow: 1px 1px 5px #888888;
      }
    }
  }
}
.supplement-button {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 15px;
  margin: 8% 0;
}
.mt5 {
  margin-bottom: 5px;
}
.van-picker {
  margin: 0;
}
.img-choose-warp {
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
}
.flex-column {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.van-dialog {
  width: 360px;
}
.dialog {
  padding: 10px 15px;
}
.column {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.dialog-title {
  font-size: 14px;
  font-weight: bold;
  vertical-align: middle;
}
.dialog-img {
  display: flex;
  justify-content: flex-start;
  padding: 10px 0;
  img {
    width: 70px;
    height: 70px;
  }
  .dialog-img-right {
    span {
      vertical-align: top;
      font-size: 13px;
      padding-left: 5px;
    }
    p {
      font-size: 13px;
      font-weight: 100;
    }
  }
}
/deep/.van-field__left-icon {
  margin-right: 5px;
  position: absolute;
  bottom: 5px;
}

/deep/ .select {
  z-index: 2050 !important;
}
.van-button--primary {
  background: none;
  color: red;
}
/deep/ .van-field__button {
  position: absolute;
  right: -15px;
  bottom: -5px;
}
.van-dialog {
  top: 40%;
}
.van-tag {
  line-height: revert !important;
  padding: 0 0.5em !important;
}
/deep/ .van-field__word-limit {
  text-align: left;
}
.dialog-img-offset {
  padding-left: 50px;
}
/deep/ .el-select .el-input .el-select__caret {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.reason-bottom {
  width: 65px;
  margin-top: 5px;
}
</style>
<style lang="less">
.select {
  z-index: 3000 !important;
}
</style>
